<template>
    <dl class="book-item">
        <dt>
            <img :src="obj.avatar" alt="">
        </dt>
        <dd>
            <h2>{{obj.title}}</h2>
            <p>{{obj.summary}}</p>
            <button @click="$router.push({path:`/detail/${obj.id}`})">查看详情</button>
            <add-button :state="obj.state" :id="obj.id"></add-button>
        </dd>
    </dl>
</template>
<script>
import addButton from './add-button'
export default {
    props:['obj'],
    components:{
        addButton
    }
}
</script>

<style lang="scss">
    .book-item{
        margin:0 20px;
        display: flex;
        border-bottom:1px solid gray;
        dt{
            margin-right:10px;
            img{
                width:80px;
                height:120px;
            }
        }
        dd{
            font-size:12px;
        }
    }
</style>

